import React,{useState,useContext} from "react";
import { barContext } from "../../contexts";

export default function Input(props) {
    
    const {state,dispatch} = useContext(barContext);
    
    const {
        title = 'title',
        type = 'text',
        inputName = 'self',
        min = 0,
        max = 0,
        

    } = props;
    
    const [value,setValue] = useState(state[inputName] || 0)

    const valueChange = function(e) {
        let v  = e.target.value;
        if(v >= min && v <= max) {
            setValue(v);
            dispatch({
                type:inputName,
                payload:{
                    value:Number(v)
                }
                
            })
            
        }else {
            window.alert('输入错误')
        }
        
    }

    return (
        <label htmlFor={inputName}>
            {title}：<input onInput={valueChange} type={type} name={inputName} id={inputName} max={max} min={min} value={value} placeholder="请输入"/>
        </label>
                
    )
}